
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>全局分析</title>

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/table1.css" rel="stylesheet" type="text/css">


</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div class="from_main" >
    <div class="news_check">
        <div class="check_left l_left">
            <label>时间段<label>
            <input type="date" class="find_input"/>



        <button>查询</button>
        </div>
        <div class="check_right r_right">
            <a class="btn btn-default"><span class=" glyphicon glyphicon-circle-arrow-down l_left"></span>打印</a>
            <a class="btn btn-default"><span class=" glyphicon glyphicon-download-alt l_left"></span>导出</a>
        </div>
        <div class="clear"></div>
    </div>

    <div style="padding: 0 10px 0 10px ;border: 1px #ccc solid;background-color: #fff;">


        <div class="e_chart">
            <div class="charts l_left last_charts" style="width: 100%">
                <p class="charts_p">灯具故障分析<span class="r_right">更多></span></p>
                <div id="container7" style="height:250px;"></div>
                <div style="width: 100%;margin-top: 0px">
                    <table class="annyTable" border="1">
                        <tr>
                            <td class="first_td">故障总数</td>
                            <td class="">13025件</td>

                        </tr>
                        <tr>
                            <td class="first_td">路灯</td>
                            <td>120件</td>

                        </tr>
                        <tr>
                            <td class="first_td">灯箱</td>
                            <td>1230件</td>


                        </tr>
                        <tr>
                            <td class="first_td">开关</td>
                            <td>2301件</td>

                        </tr>
                        <tr>
                            <td class="first_td">观景灯</td>
                            <td>2301件</td>

                        </tr>
                        <tr>
                            <td class="first_td">电压箱</td>
                            <td>2301件</td>

                        </tr>

                    </table>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

</div>




</body>
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/echarts-all.js"></script>

<script>
    $(function(){
        var myChart = echarts.init($("#container7")[0]);
        option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['路灯','灯箱','开关','观景灯','电压箱']
            },

            calculable : true,
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : ['高新区','新都区','成化区','青羊区','金牛区','龙泉区','锦江区']
                }
            ],
            series : [
                {
                    name:'路灯',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name:'灯箱',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'开关',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'电压箱',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'观景灯',
                    type:'bar',
                    stack: '总量',
                    itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                    data:[220, 182, 191, 234, 290, 330, 310]
                }


            ]
        };
        myChart.setOption(option);
    });
</script>
</html>
